<template>
  <div class="ccc" style="margin: 0 0 10px 0">
    <div class="selection-area-contaier"> <span @click="cliceArrow(`previous`)"><svg-icon
      style="transform: rotate(180deg)" icon-class="arrow"
      class-name="arrow" :class="{arrowDisabled:!previousDis()}"/></span>
      <el-select v-model="select_value">
        <el-option
          v-for="item in options"
          :key="item.device_id"
          :label="item.device_name"
          :value="item.device_id">
        </el-option>
      </el-select>
      <span @click="cliceArrow('next')">    <svg-icon icon-class="arrow" class-name='arrow'
                                                      :class="{arrowDisabled:!nextDis()}"/></span></div>
  </div>

</template>

<script>
  import _ from 'underscore';
  import {getUserInfo} from "../../utils/auth";

  export default {

    name: "index",
    methods: {
      nextDis() {
        return this.options.length > (this.select_index + 1);
      },
      previousDis() {
        return this.select_index > 0;
      },
      cliceArrow(type) {
        if (type === 'next') {
          if (this.nextDis())
            this.$store.commit('updateLoading',true);
          if(this.$store.getters.plcIdChangeSelIndex){
            this.$store.dispatch('plc/setPlcIdChangeSelIndex', null);
          }
          this.select_index++;
        } else if (type === 'previous') {
          if (this.previousDis()) {
            this.$store.commit('updateLoading',true);
            if(this.$store.getters.plcIdChangeSelIndex) {
              this.$store.dispatch('plc/setPlcIdChangeSelIndex', null);
            }
            this.select_index--;
          }
        }
      }
    },
    //返回的值
    data() {
      return {
        options: [],
        select_index: 0,
      }
    },
    //生命周期初始化
    created() {
      let selection = this;
      this.$axios.post('/deviceRoutes', {action_type: 'deviceComboboxQuery', enterprise_id: 19,user_id:getUserInfo().user_id}).then(function (res) {
        selection.options = res.data.data;
        //lodaing
        let vm=selection.$store;
        vm.commit('updateLoading',true);
      })
    },
    //侦听器
    computed: {
      //被选中的
      select_value: {
        get() {
          if (this.options.length) {
            let changePlcDevice = this.options[this.select_index];
            let changeDeviceId = changePlcDevice.device_id;
            this.$store.dispatch('plc/setPlcId', changeDeviceId);
            return changeDeviceId;
          } else {
            return null;
          }
        },
        //往里面set值value是return返回的数
        set(newVal) {
          //把nerVal存进去
          let vm=this.$store;
          vm.commit('updateLoading',true);
          let value_index = _.findIndex(this.options, {device_id: newVal});//_.findIndex返回第一个device_id返回真值的元素的index索引
          this.select_index = value_index;
        }
      }
    }
  }
</script>

<style lang="scss">

  .ccc {
    height: 40px;
    border-radius: 5px;
    //修改颜色
    background-color: #fff;
    position: relative;
    text-align: center;
    width: 100%;
    .el-input__inner {
      -webkit-appearance: none;
      background-color: #5414d3;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5414d3;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #fff;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      width: 100%;
    }
    .selection-area-contaier {
      width: 500px;
    }
    .arrow {
      width: 5em;
      line-height: 80px;
      color: #5414d3;
      font-size: 20px;
      cursor: pointer;
      &:hover {
        color: #5414d3;
        font-size: 20px;
      }
    }
    .arrowDisabled {
      color: #c1c1c1;
      cursor: Default;
      &:hover {
        color: #c1c1c1;
        font-size: 20px;
      }
    }

    .el-select .el-input__inner:focus {
      border-color: #dad5d5;
    }
    .el-select:hover .el-input__inner {
      border-color: #dad5d5;
    }
    .el-select .el-input .el-select__caret {
      color: #ffffff;
    }
    .el-input--suffix .el-input__inner {
      text-align: center;
    }

  }
</style>
